import { Component, forwardRef, Input, OnInit } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";

@Component({
    selector: "checkbox-wrapper",
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CheckboxWrapperComponent),
            multi: true,
        },
    ],
    template: `
        <nz-checkbox-wrapper style="display:inline;" (nzOnChange)="changeValue($event)">
            <label
                nz-checkbox
                *ngFor="let item of areaList"
                [(ngModel)]="item.selected"
                [nzValue]="{ cityId: '3206', cityName: '南通市', areaId: item.id, areaName: item.name }"
                ><span class="select-item">{{ item.name }}</span></label
            >
        </nz-checkbox-wrapper>
    `,
    styles: [
        `
            .select-item {
                display: inline-block;
                height: 32px;
                line-height: 30px;
                padding: 0 10px;
                border: 1px solid #bfbfbf;
                border-radius: 2px;
            }
        `,
    ],
})
export class CheckboxWrapperComponent implements OnInit {
    @Input()
    private areaList: Array<any> = [];
    @Input()
    private value: Array<any> = [];
    propagateChange = (_: any) => {};
    writeValue(value: any) {
        if (value) {
            this.value = value;
        }
    }

    registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    registerOnTouched(fn: any) {}

    ngOnInit() {
    }
    changeValue(value) {
        this.value = value;
        this.propagateChange(value);
    }
}
